<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        height: 0;width: 0;
        border-style: solid;
        border-color: transparent;/* 透明 */
        border-width: 10px; 
        border-right-color: turquoise;
    }
    span{
        background-color: rebeccapurple;position: sticky;top:10px
    }
</style>
<body>
    <!--定位position
        relative相对定位 如果没有定位偏移量 对元素本身没有任何影响 不使元素脱离文档流 
            不影响其他元素布局 left..相对于当前元素自身进行偏移
        absolute绝对定位 使元素完全脱离文档流 使内联元素支持宽高 使块元素默认宽根据内容决定
            如果有定位祖先元素相对于定位祖先元素(有相对，绝对，固定)发生偏移，没有定位祖先元素相对于整个文档发生偏移
        fixed固定定位 使元素完全脱离文档流 使内联元素支持宽高 使块元素默认宽根据内容决定
            相对于整个浏览器窗口进行偏移 不受浏览器滚动条的影响
        sticky黏性定位 在指定的位置，进行黏性操作(滚动条移动到指定位置后 就不动了)
        z-index定位层级 默认层级是0 嵌套的时候里面的层级再高也没有-如果嵌套的层级没有其他层级高
    -->
    <div></div>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <span>sticky黏性定位sticky黏性定位sticky黏性定位sticky黏性定位</span>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
    <p>sticky黏性定位</p>
</body>
</html> 